<template>
  <div class="Searchusers">
    <div class="main">
      <div class="imglist" v-for="item in resultuserprofiles.userprofiles" :key="item.id">
        <img :src="item.avatarUrl" alt="">
        <div style="display:flex;" class="p1">
          <p>{{item.nickname}}</p>
          <i class="iconfont " :class="item.gender==1?'icon-nv red':'icon-nan nan'" style=""></i>
        </div>

        <div class="zhuanji">
          <p>{{item.signature}}</p>
        </div>
      </div>
      <div style="margin-left: 300px;">
        <el-pagination @current-change="currentchange" @next-click="nextclick" @prev-click="prevclick" background layout="prev, pager, next" :total="resultuserprofiles.userprofileCount" :page-size="25">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Searchusers',
  data() {
    return {
      limit: 25,
      offset: 0,
      type: 1002
    }
  },
  computed: {
    ...mapState({
      resultuserprofiles: state => state.search.resultsongs
    })
  },
  mounted() {
    this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
  },
  methods: {
    //上一页
    prevclick(val) {
      this.offset = this.limit * (val - 1)
      this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
    },
    //下一页
    nextclick(val) {
      this.offset = this.limit * (val - 1)
      this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
    },
    currentchange(val) {
      this.offset = this.limit * (val - 1)
      this.$store.dispatch('getSearchdetailsList', { keywords: this.$route.query.keywords, limit: this.limit, offset: this.offset, type: this.type })
    }
  }
}
</script>

<style lang="less" scoped>
.Searchusers {
  .main {
    .p {
      background-color: rgb(241, 241, 241);
    }
    .imglist {
      width: 100%;
      padding: 5px;
      padding-left: 20px;
      display: flex;
      align-items: center;
      border-radius: 5px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
      }
      .p1 {
        margin-left: 20px;
        font-size: 15px;
        opacity: 0.8;
        width: 600px;
        .red {
          font-size: 5px;
          color: red;
          margin-left: 5px;
        }
        .nan {
          font-size: 5px;
          color: blue;
          margin-left: 5px;
        }
      }
      .zhuanji {
        display: flex;
        margin-left: 350px;
        p {
          margin-left: 5px;
          font-size: 10px;
          opacity: 0.4;
        }
      }
    }
    .imglist:hover {
      cursor: pointer;
      background-color: rgb(240, 239, 238);
    }
  }
}
</style>